<div ng-controller="QListsController">
	<h1>Question Lists</h1>
	<p>Management of all question lists.</p>
	<p class="delimiter"></p>
	<h2>Create a new question list</h2>
	<form id="qlistForm" name="qlistForm">
		<label>Name:</label>&nbsp;&nbsp;<input id="name" ng-model="currentQList.name" required />&nbsp;<button id="save" ng-click="save()" ng-disabled="qlistForm.$invalid">Save this Question List</button><button id="cancel" ng-click="cancel()">Cancel</button>
	</form>
	<p class="delimiter"></p>
	<h2>Questions in the new question list</h2>
	<div ng-repeat="qs in tempQuestions">
		{{qs.id}} - {{qs.text}}
		<button id="removeQuestion" ng-click="removeQuestion(qs)">Remove questions</button>
	</div>
	<p class="delimiter"></p>
	<h2>List of all questions</h2>
	<div ng-repeat="question in questions">
		<button id="addQuestion" ng-click="addQuestion(question.id)">Add question</button>&nbsp;
		{{question.id}} - {{question.text}}
	</div>
	<p class="delimiter"></p>
	<h2>Editing and deleting of saved question lists</h2>
	<table border="1">
		<thead>
			<tr>
				<th>Name</th>
				<th>Questions</th>
				<th>Edit</th>
				<th>Delete</th>
				<th>Send2Mobile</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="qlist in qlists">
				<td>{{qlist.name}}</td>
				<td><div ng-repeat="iq in qlist.questions">{{iq.text}}</div> <br /></td>
				<td><button id="edit" ng-click="edit(qlist)">Edit question list</button></td>
				<td><button id="addQuestion" ng-click="remove($index, qlist.id)">Delete question list</button></td>
				<td><button id="sendList" ng-click="send(qlist)">Send</button></td>
			</tr>
		</tbody>
	</table>
</div>